<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- 加载layui框架样式 -->
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/person-info/tcal.css">
    <link rel="stylesheet" href="../../css/nav/nav.css">
    <link rel="stylesheet" href="../../css/person-info/person-info.css">
    <script src="../../plugins/jquery/jquery.min.js"></script>
    

    <title>个人资料-基本信息</title>
</head>

<body>
    <!-- 响应式导航 begin -->
    <div class="o-header">
        <div class="o-header-inner">
            <div class="layui-header header header-index">
                <a class="logo" href="../../index.html">
                    KeepMoving
                </a>

                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item"><a href="../../index.html">首页</a></li>
                    <li class="layui-nav-item">
                        <a href="../plan/plan-index.html">训练计划</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="../action/fit-action.html">健身动作</a>
                    </li>
                    <li class="layui-nav-item"><a href="../food/food.html">饮食健康</a></li>
                    <li class="layui-nav-item ">
                        <a href="../user/login.html">登录</a>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="../user/register.html">注册</a>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a href="javascript:;"><img src="../../imgs/person-center/girl.jpg" class="layui-nav-img">我</a>
                        <dl class="layui-nav-child">
                            <dd><a href="../person/person-center.html">个人中心</a></dd>
                            <dd><a href="../person/person-info-profile.html">账号设置</a></dd>
                            <dd><a href="">退出账号</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 响应式导航 end -->
    <!-- 最外层 -->
    <div class="km">

        <div class="o-personal page">
            <div class="inner">
                <!--面包屑导航开始-->
                <div class="daohang">
                    <span class="layui-breadcrumb">
                        <a href="../person/person-center.html">个人中心</a>
                        <a><cite>基本信息</cite></a>
                    </span>
                </div>
                <!-- 面包屑导航结束 -->
                <!-- 基本信息界面begin -->
                <div class="o-personal-bd">
                    <div class="col-main">
                        <div class="o-user-form base-profile">
                            <form id="formEdit" method="post" enctype="multipart/form-data"
                                action="/personal/UpdateProfile" target="ifEdit">
                                <div class="line">
                                    <span class="label">头像</span>
                                    <div class="ibox-content">
                                        <div class="layui-upload">

                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img" id="demo1">
                                                <p id="demoText"></p>
                                            </div>
                                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="line" style="margin-top: 100px;">
                                    <span class="label">昵称</span>
                                    <div class="layui-input-block">
                                        <input type="text" name="title" lay-verify="title" autocomplete="off"
                                            placeholder="昵称" class="layui-input">
                                    </div>
                                </div>
                                <div class="line">
                                    <span class="label" style="margin-top: 55px;">城市</span>
                                    <div id="address" style="margin: 50px auto auto 50px;">
                                            <select class="select" id="province" name="province">
                                                <option value="">选择省份</option>
                                            </select>
                                            
                                            <select name="city" id="city">
                                                <option value="">选择城市</option>
                                            </select>
                                    
                                            <select name="town" id="town">
                                                <option value="">选择区域</option>
                                            </select>
                                        </div>
                                        
                                        

                                </div>
                                <div class="line">

                                    <div class="layui-inline">
                                        <span>生日</span>
                                        <div class="layui-input-inline" style="margin-left: 25px;">
                                            <input type="text" class="layui-input" id="birth" placeholder="生日">
                                        </div>
                                    </div>
                                </div>

                                <div class="line">
                                    <span class="label">性别</span>
                                    <div class="layui-input-block block">
                                        <input type="radio" name="sex" value="男" title="男" checked>
                                        <div class="layui-unselect layui-form-radio layui-form-radioed">
                                            <i id="layui-anim"
                                                class="layui-anim layui-icon layui-anim-scaleSpring"></i>
                                            <div>男</div>
                                        </div>
                                        <input type="radio" name="sex" value="女" title="女">
                                        <div class="layui-unselect layui-form-radio">
                                            <i id="layui-anim" class="layui-anim layui-icon"></i>
                                            <div>女</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="action">
                                    <a href="javascript:void(0)" class="u-button save">保存</a>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-aside">
                        <div class="o-personal-nav">
                            <ul>
                                <li class="cur"><a href=""><em><i></i>基本资料</em></a></li>
                                <li><a href="../person/person-info-fitness.html"><em><i></i>身体素质</em></a></li>
                                <li><a href="../person/person-info-settings.html"><em><i></i>账号设置</em></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 基本资料end -->
            </div>
        </div>
    </div>

    <!-- 主体内容结束 -->
    <script src="../../plugins/layui/layui.js"></script>
    <script src="../../js/nav/nav.js"></script>
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- 文件上传 -->
    <script>
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '/upload/'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        })

        // 日期
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

        })
    </script>
    <script>
        $('.layui-input-block div').click(function () {
            $(this).addClass('layui-form-radioed').siblings().removeClass('layui-form-radioed');

        })
    </script>

    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期时间选择器
            laydate.render({
                elem: '#birth'
                , type: 'datetime'
            });
        });
    </script>
    </script>
    <script type="text/javascript" src="../../plugins/jquery/addres.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#address").selectAddress()
            $("#town").focusout(function(){
                var province = $("#province option:selected").html()
                var city = $("#city option:selected").html()
                var town = $("#town option:selected").html()
                if(province!= '选择省份' && city!="选择城市" && town!='选择区域'){
                    console.log('省份/直辖市：'+province+'\n城市:'+city+'\n区/县：'+town)
                }	
            })
        })
    </script>


</body>

</html>